<template>
	<view class="content">
		<view class="box">
			<view class="title">
				{{detail.name}}
			</view>
			<view class="item">
				<span class="left">手机号</span>
				<span class="right">{{detail.mobile}} <image @click="callPhone" class="call" src="../../static/call.png" mode=""></image></span>
			</view>
			<view class="item">
				<span class="left">身份证号</span>
				<span class="right">{{detail.sfz}}</span>
			</view>
			<view class="item">
				<span class="left">身份证照片</span>
				<span class="right">
					<image :src="detail.zmsfimage" mode="" @click="previewImg(detail.zmsfimage)"></image>
					<image :src="detail.fmsfimage" mode=""  @click="previewImg(detail.fmsfimage)"></image>
				</span>
			</view>
		</view>
		<view class="box">
			<view class="title">
				行驶证信息
			</view>
			<view class="item">
				<span class="left">车辆类型</span>
				<span class="right">{{detail.cartype}}</span>
			</view>
			<view class="item">
				<span class="left">车牌号</span>
				<span class="right">{{detail.carno}}</span>
			</view>
			<view class="item">
				<span class="left">住址</span>
				<span class="right">{{detail.address}}</span>
			</view>
			<view class="item">
				<span class="left">使用性质</span>
				<span class="right">{{detail.syxz}}</span>
			</view>
			<view class="item">
				<span class="left">品牌型号</span>
				<span class="right">{{detail.ppxh}}</span>
			</view>
			<view class="item">
				<span class="left">车辆识别代码</span>
				<span class="right">{{detail.clsbdm}}</span>
			</view>
			<view class="item">
				<span class="left">发动机号</span>
				<span class="right">{{detail.fdjhm}}</span>
			</view>
			<view class="item">
				<span class="left">注册日期</span>
				<span class="right">{{detail.bxdjr}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				id: "",
				hasLogin: false,
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				type: 'datetime',
				appointmenttime: "",
				couponList: [],
				couponDetail: {},
				vipId:"",
			}
		},
		onLoad(options) {
			this.vipId = options.id
			this.getDetail();
			this.hasLogin = !!uni.getStorageSync('token');
		},
		components: {
		},
		methods: {
			previewImg(imgurl) {
				let _this = this;
				let imgsArray = [imgurl];
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.mobile //仅为示例
				});
			},
			getDetail() {
				this.$get('shop/customerinfo', {
					id: this.vipId,
				}, (res) => {
					console.log(res)
					this.detail = res
				})
			},
			getCouponDetail() {
				this.couponDetail = this.couponList.filter(item => item.id == this.couponId)[0]
			},
		}
	}
</script>

<style>
	.box{
		background-color: #FFFFFF;
		width: 700rpx;
		margin:20rpx auto 0;
		padding: 24rpx;
		border-radius: 24rpx;
	}
	.box .title{
		line-height: 56rpx;
		color: #333333;
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}
	.box .item{
		border-bottom: 1px solid #E3E3E3;
		padding: 14rpx 0;
		overflow: hidden;
	}
	.item .right{
		float: right;
	}
	.item .right image{
		width: 315rpx;
		height: 228rpx;
		margin-right: 24rpx;
		margin-top: 30rpx;
		border-radius: 12rpx;
	}
	.item .right image:last-child{
		margin-right: 0;
	}
	.item .right .call{
		width: 44rpx;
		height: 44rpx;
		margin-top: 0;
		margin-left: 15rpx;
		position: relative;
		top: 6rpx;
	}
</style>
